<template>
	<view class="container">
		<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>

		<!-- Logo区域 -->
		<view class="logo-section">
			<view class="logo-container">
				<image class="logo-image" src="/static/temp/logo.png" mode="aspectFit"></image>
			</view>
		</view>

		<!-- 标题 -->
		<view class="title-section">
			<text class="main-title">商圈</text>
		</view>

		<!-- 登录按钮区域 -->
		<view class="login-buttons">
			<!-- 微信登录按钮 -->
			<view class="wechat-login-btn" @click="wechatLogin">
				<u-icon name="weixin-fill" size="32" color="#fff"></u-icon>
				<text class="btn-text">微信登录</text>
			</view>

			<!-- 手机号登录按钮 -->
			<view class="phone-login-btn" @click="phoneLogin">
				<u-icon name="phone-fill" size="32" color="#333"></u-icon>
				<text class="btn-text phone-text">手机号登录</text>
			</view>
		</view>

		<!-- 用户协议 -->
		<view class="agreement-section">
			<view class="agreement-content">
				<u-checkbox v-model="agreeTerms" shape="circle" size="18" activeColor="#fa436a"></u-checkbox>
				<text class="agreement-text">
					同意
					<text class="link-text" @click="openUserAgreement">《用户服务协议》</text>
					、
					<text class="link-text" @click="openPrivacyPolicy">《隐私政策》</text>
					和
					<text class="link-text" @click="openChildrenPrivacy">《儿童隐私政策》</text>
				</text>
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapMutations
} from 'vuex';

export default {
	data() {
		return {
			agreeTerms: false
		}
	},
	onLoad() {

	},
	methods: {
		...mapMutations(['login']),
		navBack() {
			uni.navigateBack();
		},
		// 微信登录
		wechatLogin() {
			if (!this.agreeTerms) {
				this.$api.msg('请先同意用户协议');
				return;
			}
			this.$api.msg('微信登录');
			// 这里可以调用微信登录API
		},
		// 手机号登录
		phoneLogin() {
			if (!this.agreeTerms) {
				this.$api.msg('请先同意用户协议');
				return;
			}
			// 跳转到手机号登录页面或展示手机号登录表单
			this.$api.msg('手机号登录');
		},
		// 打开用户协议
		openUserAgreement() {
			this.$api.msg('打开用户服务协议');
		},
		// 打开隐私政策
		openPrivacyPolicy() {
			this.$api.msg('打开隐私政策');
		},
		// 打开儿童隐私政策
		openChildrenPrivacy() {
			this.$api.msg('打开儿童隐私政策');
		}
	}
}
</script>

<style lang='scss'>
page {
	background: #f5f5f5;
}

.container {
	position: relative;
	width: 100vw;
	height: 100vh;
	background: #f5f5f5;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 40upx;
}

.back-btn {
	position: absolute;
	left: 40upx;
	z-index: 9999;
	padding-top: var(--status-bar-height);
	top: 40upx;
	font-size: 40upx;
	color: #333;
}

.logo-section {
	margin-top: 260upx;
	margin-bottom: 20upx;

	.logo-container {
		width: 200upx;
		height: 200upx;
		border-radius: 50upx;
		background: linear-gradient(135deg, #a8e6cf 0%, #88d8a3 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;
		box-shadow: 0 0 10upx 4upx rgba(0, 0, 0, 0.1);
	}

	.logo-image {
		width: 120upx;
		height: 120upx;
	}
}

.title-section {
	margin-bottom: 200upx;

	.main-title {
		font-size: 64upx;
		color: #333;
		text-align: center;
	}
}

.login-buttons {
	width: 100%;
	max-width: 580upx;
	margin-bottom: 80upx;

	.wechat-login-btn {
		width: 100%;
		height: 120upx;
		background: #12c291;
		border-radius: 60upx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 40upx;

		.btn-text {
			color: #fff;
			font-size: 36upx;
			font-weight: 500;
			margin-left: 16upx;
		}
	}

	.phone-login-btn {
		width: 100%;
		height: 120upx;
		background: #fff;
		border-radius: 60upx;
		display: flex;
		align-items: center;
		justify-content: center;

		.phone-text {
			color: #333;
			font-size: 36upx;
			font-weight: 500;
			margin-left: 16upx;
		}
	}
}

.agreement-section {
	position: absolute;
	bottom: 60upx;
	left: 40upx;
	right: 40upx;

	.agreement-content {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.agreement-text {
		font-size: 24upx;
		color: #666;
		line-height: 1.6;
		margin-left: 16upx;
		flex: 1;
	}

	.link-text {
		color: #fa436a;
		text-decoration: underline;
	}
}
</style>
